<!doctype html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../static/assets/images/favicon.ico">

    <title>Offcanvas template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="../../../static/assets/css/bootstrap.min.css" th:href="@{assets/css/bootstrap.min.css}"
          rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="../../../static/assets/css/admin/admin.css" th:href="@{assets/css/admin/admin.css}" rel="stylesheet">
</head>

<body class="bg-light">

<nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
    <a class="navbar-brand" href="../blog/index.html">NCUOS</a>
    <button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav blog-menu mr-auto">
            <li class="nav-item blog-menu-item" th:each="menu : ${menuList}" th:attr="url=${menu.url}">
                <a class="nav-link" href="javascript:void(0)" th:title="${menu.name}" th:text="${menu.name}"></a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown"
                   aria-haspopup="true" aria-expanded="false">管理员</a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown01">
                    <a class="dropdown-item" href="#">个人资料</a>
                    <a class="dropdown-item" href="#">修改密码</a>
                    <a class="dropdown-item" href="#">退出登录</a>
                </div>
            </li>
        </ul>

        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

<div class="nav-scroller bg-white box-shadow">
    <nav class="nav nav-underline">
        <a class="nav-link active" href="#">Dashboard</a>
        <a class="nav-link" href="#">
            Friends
            <span class="badge badge-pill bg-light align-text-bottom">27</span>
        </a>
        <a class="nav-link" href="#">Explore</a>
        <a class="nav-link" href="#">Suggestions</a>
        <a class="nav-link" href="#">Link</a>
        <a class="nav-link" href="#">Link</a>
        <a class="nav-link" href="#">Link</a>
        <a class="nav-link" href="#">Link</a>
        <a class="nav-link" href="#">Link</a>
    </nav>
</div>

<main role="main" class="container">
    <div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded box-shadow">
        <div class="lh-100">
            <h6 class="mb-0 text-white lh-100">Bootstrap</h6>
            <small>Since 2011</small>
        </div>
    </div>

    <div id="users-container"></div>
</main>

<script src="../../../static/assets/js/jquery-3.3.1.min.js" th:src="@{assets/js/jquery-3.3.1.min.js}"></script>
<script src="../../../static/assets/js/popper.min.js" th:src="@{assets/js/popper.min.js}"></script>
<script src="../../../static/assets/js/bootstrap.min.js" th:src="@{assets/js/bootstrap.min.js}"></script>
<script src="../../../static/assets/js/holder.min.js" th:src="@{assets/js/holder.min.js}"></script>
<script src="../../../static/assets/js/admin/admin.js" th:src="@{assets/js/admin/admin.js}"></script>
<script src="../../../static/assets/js/admin/offcanvas.js" th:src="@{assets/js/admin/offcanvas.js}"></script>
</body>
</html>
